<template>
  <div id="app">
    <transition name="move">
      <router-view/>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style lang="stylus" rel="stylesheet/stylus" type="text/stylus">
  $color-background = #f2f2f2
  #app
    width 100vm
    height: 100vh
    .move-enter-active {
      position: absolute;
      transition: all 0.2s linear;
      transform: translate3d(0, 0, 0);
    }
    .move-leave-active {
      position: absolute;
      transition: all 0.2s linear;
      transform: translate3d(-100%, 0, 0);
    }
    .move-enter {
      position: absolute;
      transition: all 0.2s linear;
      transform: translate3d(100%, 0, 0);
    }
    .move-leave {
      position: absolute;
      transition: all 0.2s linear;
      transform: translate3d(0, 0, 0);
    }
</style>
